<template>
	<view>
		<template v-for="(vo,keys) in list">
			<view class="xilu_list_item" @tap="courseDetail(vo.id,vo.course_type)">
				<view class="pr">
					<image :src="'https://xlx.zgyjxlx.com/' + vo.course.thumb_image" mode="aspectFill"
						class="xilu_list_item_cover">
					</image>
					<view class="starbox">
						<view v-if="vo.coach.star==5" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star>4 && vo.coach.star<5" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star>3 && vo.coach.star<4" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star>2 && vo.coach.star<3" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star>1 && vo.coach.star<2" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/half_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star==4" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star==3" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star==2" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<view v-if="vo.coach.star==1" class="flex-box">
							<image src="@/static/images/star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
							<image src="@/static/images/empty_star.png" class="ico12 mr5"></image>
						</view>
						<text class="fs12">{{ vo.coach.star}}</text>
					</view>
				</view>
				
				<view class="pt10 plr20">
					<view class="m-ellipsis fs32 fw700 col3 lh42">{{vo.course.title || ''}}</view>
					<view class="col3 fs24 flex-box mt10">
						<image src="@/static/images/coach.png" style="height:30rpx" mode="heightFix"></image>
						<text class="ml10">{{ vo.coach.coach_name }} <!--{{ vo.coach.group_name}}--> </text>
					</view>
					<view class="flex-between flex-box mt10">
						<view class="m-ellipsis fs24 fw500 col3 lh42 flex-box"><image src="@/static/images/clock.png" style="height:30rpx" mode="heightFix"></image><text class="ml10">{{vo.duration}}分钟</text></view>
						<view v-if="lists" class="flex-box col3"><image src="@/static/images/position.png" style="height:30rpx" mode="heightFix"></image><text class="ml10 fs24">{{ lists[keys] || ''}}</text></view>
					</view>
					

					
					<!-- <view class="col3 fs24">评分：{{vo.coach.star}}分</view> -->

					<view class="mt10 fs30 col2 lh32 flex-box" style="display: flex; justify-content: space-between;">
						<view class="fw700" style="color:#FF8D1A">¥{{vo.course_price || 0.00}}</view>
						<view class="bmbtn">报名学习</view>
					</view>
				
				</view>
			</view>
		</template>

	<!-- <view class="m-ellipsis mt10 fs24 col9 lh32">{{vo.course.lable_list.join('|')}}</view>
					<view class="flex-box mt10">
						<view class="flex-grow-1 m-ellipsis"><text
								class="col2 fs34 fw500 lh34 pr10">¥{{vo.course_price || 0.00}}</text><text
								class="tdl fs20 col9 lh34" v-if="vo.market_price > 0">¥{{vo.market_price}}</text></view>
						<view class="fs20 col2" v-if="vo.is_plan == 1">{{vo.order_count || 0}}<text
								class="col9">/{{vo.sign_count}}人</text></view>
						<view class="fs20 col2" v-else-if="vo.is_plan == 2">可排队</view>
						<view class="fs20 col9" v-else-if="vo.is_plan == 3">已开始</view>
						<view class="fs20 col9" v-else-if="vo.is_plan == 4">已售罄</view>
					</view> -->
	</view>
</template>

<script>
	export default {
		name: "course-list",
		data() {
			return {
				lists: [null, null, null],
				list: []
			};
		},
		props: {
			courseList: {
				Object
			}
		},
		methods: {
			//课程详情
			courseDetail(id, is_type) {
				this.$api.navigate('../../pages/group_lessons_info/group_lessons_info?id=' + id + '&is_type=' + is_type +
					'&lng=' +
					this.courseList.lng + '&lat=' + this.courseList.lat
				)
			}
		},
		mounted() {
			console.log('1521663', this.courseList);
			this.list = this.courseList.list.map(item => {
				return {
					...item,
					duration: Number(item.duration).toFixed(0)
				}
			})
			
			if (this.courseList.list[0].shop.hasOwnProperty('distance')) {
				this.lists = this.courseList.list.map((item, index) => {
					
					return ((parseFloat(item.shop.distance) / 1000).toFixed(1)) + 'km'

				})
			}

			console.log('1lists', this.lists);



		}
	}
</script>

<style lang="scss" scoped>
	.bmbtn{
		width:150rpx;
		text-align: center;
		height:50rpx;
		background-color: #FFEB3B;
		border-radius: 25rpx;
		color:#FF6105;
		line-height: 50rpx;
	}
	.starbox{
		width:130rpx;
		height:36rpx;
		background-color: #FFEB3B;
		position: absolute;
		left:0;
		top:0;
		border-radius: 20rpx 0 20rpx 0;
		color:#FF6105;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xilu {
		&_list_item:nth-of-type(2n) {
			margin-right: 0;
		}

		&_list_item {
			width: 340rpx;
			padding-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;

			&_cover {
				width: 100%;
				height: 240rpx;
				display: block;
				border-radius: 20rpx 20rpx 0 0;
				box-shadow: 0 0 10rpx lightgrey;
			}
		}

		&_box1 {
			width: 700rpx;
			background: #404243;
			border-radius: 20rpx;
			padding: 0 20rpx;

			&_item {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

			}

			&_item+&_item {
				border-top: 1px solid #666;
			}

			&_cover {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				display: block;
			}
		}
	}
</style>